//V3.0
:root{
/*除0以外的透明度全局变量*/
--opacity-low: 0.2;
--opacity-medium: 0.5;
--opacity-high: 0.9;
       }
.feather{
position: absolute;
transform: none;    
will-change: transform;
width:100%;
height:100%;
overflow:hidden;
z-index: -1;
          }
.feather div{
    opacity:0;
}
.feather div:nth-child(1){
top:-30%;
left: 10%;
position: absolute;
animation: animate1 27s linear infinite;
animation-delay: 7s;
-webkit-animation-delay: 7s;
}
.feather div:nth-child(2){
top:0%;
left: 20%;
position: absolute;
animation: animate2 29s linear infinite;
}
.feather div:nth-child(3){
top:-20%;
left: 30%;
position: absolute;
animation: animate3 28s linear infinite;
animation-delay: 7s;
-webkit-animation-delay: 7s;
}
.feather div:nth-child(4){
top:0%;
left: 40%;
position: absolute;
animation: animate4 29s linear infinite;
}
.feather div:nth-child(5){
top:-20%;
left: 50%;
position: absolute;
animation: animate5 29s linear infinite;
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.feather div:nth-child(6){
top:-20%;
left: 60%;
position: absolute;
animation: animate6 27s linear infinite;
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.feather div:nth-child(7){
top:-30%;
left: 70%;
position: absolute;
animation: animate7 30s linear infinite;
animation-delay: 12s;
-webkit-animation-delay: 12s;
}
.feather div:nth-child(8){
top:0%;
left: 80%;
position: absolute;
animation: animate8 28s linear infinite;
}
.feather div:nth-child(9){
top:-20%;
left: 90%;
position: absolute;
animation: animate9 29s linear infinite;
animation-delay: 16s;
-webkit-animation-delay: 16s;
}

@keyframes animate1{
0%{opacity: 0;}
15%{opacity: var(--opacity-high); }
30%{transform: translateY(1560%) translateX(450%) rotate(300deg); opacity: 0;}
31%{transform: translateY(-1200%); opacity: 0;}
45%{opacity: var(--opacity-high);}
60%{transform: translateY(1200%) translateX(-400%) rotate(-300deg); opacity: 0;}
61%{transform: translateY(-1200%); opacity: 0;}
75%{opacity: var(--opacity-high);}
100%{transform: translateY(1200%) translateX(250%) rotate(300deg); opacity: 0;}
}

@keyframes animate2{
0%{top: 15%; opacity: 0;}
25%{opacity: var(--opacity-high);}
40%{transform: translateY(1200%) translateX(300%) rotate(250deg); opacity: 0;}
41%{transform: translateY(-1200%); opacity: 0;}
55%{opacity: var(--opacity-medium);}
70%{transform: translateY(1200%) rotate(250deg) translateX(-350%); opacity: 0;}
71%{transform: translateY(-1200%); opacity:0;}
85%{opacity: var(--opacity-high);}
100%{transform: translateY(1200%) rotate(270deg) translateX(100%);opacity: 0;}}


@keyframes animate3{
0%{opacity: 0;}
18%{opacity: var(--opacity-high);}
35%{transform: translateY(1560%) rotate(-270deg) translateX(-50%); opacity: 0;}
36%{transform: translateY(-1300%); opacity: 0;}
50%{opacity: var(--opacity-medium);}
65%{transform: translateY(1200%) rotate(270deg) translateX(200%); opacity: 0;}
66%{transform: translateY(-1200%); opacity:0;}
78%{opacity: var(--opacity-high);}
100%{translateY(1200%) transform: translateX (-200%) rotate(300deg); opacity: 0;}}


@keyframes animate4{
0%{top: -20%; opacity: 0;}
15%{opacity: var(--opacity-medium);}
30%{transform: translateY(1300%) translateX(200%) rotate(270deg); opacity: 0;}
31%{transform: translateY(-1200%); opacity: 0;}
45%{opacity: var(--opacity-medium);}
60%{transform: translateY(1200%) rotate(-200deg) translateX(100%); opacity: 0;}
61%{transform: translateY(-1200%); opacity:0;}
75%{opacity: var(--opacity-high);}
90%{transform: translateY(1200%); opacity: 0;}
91%{transform: translateY(-1200%); opacity: 0;}
95%{opacity: var(--opacity-low);}
100%{transform: translateY(240%) translateX(-150%);opacity: 0;}}

@keyframes animate5{
0%{ opacity: 0; top: 0%;}
25%{opacity: var(--opacity-high);}
40%{transform: translateY(1300%) translateX(-350%) rotate(300deg); opacity: 0;}
41%{transform: translateY(-1200%); opacity: 0;}
55%{opacity: var(--opacity-medium);}
70%{transform: translateY(1200%) translateX(300%) rotate(-300deg); opacity: 0;}
71%{transform: translateY(-1200%); opacity:0;}
85%{opacity: var(--opacity-high);}
100%{transform: translateY(1200%) rotate(-250deg) translateX(-100%); opacity: 0;}}


@keyframes animate6{
0%{top: 30%; opacity: 0;}
19%{opacity: var(--opacity-high);}
36%{transform: translateY(1200%) translateX(-200%) rotate(-270deg); opacity: 0;}
37%{transform: translateY(-1200%); opacity: 0;}
49%{opacity: var(--opacity-high);}
68%{transform: translateY(1200%) translateX(-200%) rotate(270deg); opacity: 0;}
69%{transform: translateY(-1200%); opacity:0;}
85%{opacity: var(--opacitve-medium);}
100%{transform: translateY(1200%) translateX(200%); opacity: 0;}}

@keyframes animate7{
0%{opacity: 0;}
15%{opacity: var(--opacity-high);}
30%{opacity: 0;transform: translateY(1560%) translateX(50%) rotate(-300deg);}
31%{opacity: 0; transform: translateY(-1200%)}
45%{opacity: var(--opacity-high);}
60%{opacity: 0;transform: translateY(1200%) translateX(-150%) rotate(200deg);}
61%{opacity: 0; transform: translateY(-1200%);}
75%{opacity: var(--opacity-high);}
90%{opacity: 0; transform: translateY(1200%) rotate(-270deg);}
91%{opacity: 0%;transform: translateY(-1200%);}
95%{opacity: var(--opacity-medium);}
100%{opacity: 0;transform: translateY(330%) translateX(-100%);}
}

@keyframes animate8{
0%{opacity: 0;}
15%{opacity: var(--opacity-high);}
30%{transform: translateY(1200%) translateX(-300%) rotate(-420deg); opacity: 0;}
31%{transform: translateY(-1200%); opacity: 0;}
45%{opacity: var(--opacity-high);}
60%{transform: translateY(1200%) translateX(-200%) rotate(-420deg); opacity: 0;}
61%{transform: translateY(-1200%); opacity: 0;}
75%{opacity: var(--opacity-high);}
100%{transform: translateY(1200%) translateX(250%) rotate(-420deg); opacity: 0;}
}

@keyframes animate9{
0%{top: 15%; opacity: 0;}
25%{opacity: var(--opacity-high);}
40%{transform: translateY(1200%) translateX(-100%) rotate(360deg); opacity: 0;}
41%{transform: translateY(-1200%); opacity: 0;}
55%{opacity: var(--opacity-medium);}
70%{transform: translateY(1200%) rotate(360deg) translateX(-250%); opacity: 0;}
71%{transform: translateY(-1200%); opacity:0;}
85%{opacity: var(--opacity-high);}
100%{transform: translateY(1200%) translateX(-100%) rotate(360deg);opacity: 0;}}



.feather_x{
position: absolute;
transform: none;    
will-change: transform;
width:100%;
height:100%;
overflow:hidden;
z-index: -1;
}
.feather_x div{
    opacity:0;
}
.feather_x div:nth-child(1){
top:0%;
left: 10%;
filter: blur(4px);
position: absolute;
animation: xanimate0 47s linear infinite;
}
.feather_x div:nth-child(2){
top:0%;
left: 20%;
position: absolute;
filter: blur(4px);
animation: xanimate2 48s linear infinite;
}
.feather_x div:nth-child(3){
top:-10%;
left: 30%;
filter: blur(4px);
position: absolute;
animation: xanimate4 50s linear infinite;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.feather_x div:nth-child(4){
top:-10%;
left: 40%;
filter: blur(4px);
position: absolute;
animation: xanimate3 48s linear infinite;
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.feather_x div:nth-child(5){
top:-10%;
left: 50%;
filter: blur(4px);
position: absolute;
animation: xanimate3 48s linear infinite;
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.feather_x div:nth-child(6){
top:0%;
left: 60%;
transform: translate(300deg);
filter: blur(4px);
position: absolute;
animation: xanimate5 46s linear infinite;
animation-delay: -13s;
-webkit-animation-delay: -13s;
}
.feather_x div:nth-child(7){
top:-10%;
left: 70%;
filter: blur(4px);
position: absolute;
animation: xanimate1 45s linear infinite;
animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.feather_x div:nth-child(8){
top:0%;
left: 80%;
filter: blur(4px);
position: absolute;
animation: xanimate3 46s linear infinite;
}
.feather_x div:nth-child(9){
top:-10%;
left: 90%;
transform: translate(220deg);
filter: blur(4px);
position: absolute;
animation: xanimate3 52s linear infinite;
animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.feather_x div:nth-child(10){
top:-10%;
left: 10%;
position: absolute;
filter: blur(4px);
animation: xanimate2 48s linear infinite;
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.feather_x div:nth-child(11){
top:-10%;
left: 20%;
filter: blur(4px);
position: absolute;
animation: xanimate5 48s linear infinite;
animation-delay: -15s;
-webkit-animation-delay: -15s;
}
.feather_x div:nth-child(12){
top:-10%;
left: 50%;
filter: blur(4px);
position: absolute;
animation: xanimate 48s linear infinite;
animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.feather_x div:nth-child(13){
top:-10%;
left: 40%;
filter: blur(4px);
position: absolute;
animation: xanimate0 46s linear infinite;
animation-delay:4 s;
-webkit-animation-delay: 4s;
}
.feather_x div:nth-child(14){
top:-10%;
left: 50%;
filter: blur(4px);
position: absolute;
animation: xanimate2 48s linear infinite;
animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.feather_x div:nth-child(15){
top:-10%;
left:60%;
transform: translate(120deg); 
filter: blur(4px);
position: absolute;
animation: xanimate1 52s linear infinite;
animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.feather_x div:nth-child(16){
top:-10%;
left: 50%;
filter: blur(4px);
position: absolute;
animation: xanimate 48s linear infinite;
}
.feather_x div:nth-child(17){
top:-10%;
left: 50%;
filter: blur(4px);
position: absolute;
animation: xanimate2 48s linear infinite;
animation-delay:15s;
-webkit-animation-delay:15s;
}
.feather_x div:nth-child(18){
top:-10%;
left:90%;
transform: translate(250deg);
filter: blur(4px);
position: absolute;
animation: xanimate3 52s linear infinite;
animation-delay:17s;
-webkit-animation-delay:17s;
}



@keyframes xanimate0{
        0%{opacity: 0;}
        10%{opacity: var(--opacity-medium);}
        20%{transform: translateY(1800%) translateX(250%); opacity: 0;}
        21%{transform: translateY(-1800%); opacity: 0;}
        30%{opacity: var(--opacity-medium);}
        40%{transform: translateY(1800%) translateX(-400%); opacity: 0;}
        41%{transform: translateY(-1800%); opacity: 0;}
        50%{opacity: var(--opacity-medium);}
        60%{transform: translateY(1800%) translateX(400%); opacity: 0;}
        61%{transform: translateY(-1800%); opacity: 0;}
        70%{opacity: var(--opacity-medium);}
        80%{transform: translateY(1800%) translateX(-400%); opacity: 0;}
        81%{transform: translateY(-1800%); opacity: 0;}
        90%{opacity: var(--opacity-medium);}
        100%{transform: translateY(1800%) translateX(-400%); opacity: 0; transform: rotate(360deg);}
                }

@keyframes xanimate1{
        0%{top: 20%; opacity: 0;}
        8%{opacity: var(--opacity-medium);}
       16%{transform: translateY(1600%) translateX(300%); opacity: 0;}
        17%{transform: translateY(-1800%); opacity: 0;}
        27%{opacity: var(--opacity-medium);}
       37%{transform: translateY(1800%) translateX(-400%); opacity: 0;}
       38%{transform: translateY(-1800%); opacity: 0;}
        48%{opacity: var(--opacity-medium);}
       58%{transform: translateY(1800%) translateX(400%); opacity: 0;}
       59%{transform: translateY(-1800%); opacity: 0;}
        69%{opacity: var(--opacity-medium);}
       79%{transform: translateY(1800%) translateX(400%); opacity: 0;}
       80%{transform: translateY(-1800%); opacity: 0;}
        90%{opacity: var(--opacity-medium);}
       100%{transform: translateY(1800%) translateX(-300%); opacity: 0;}
                }

@keyframes xanimate2{
        0%{top: 30%; opacity: 0;}
        10%{opacity: var(--opacity-medium);}
        20%{transform: translateY(1400%); opacity: 0;}
        21%{transform: translateY(-1800%) translateX(250%); opacity: 0;}
        30%{opacity: var(--opacity-medium);}
        40%{transform: translateY(1800%) translateX(-300%); opacity: 0;}
        41%{transform: translateY(-1800%); opacity: 0;}
        50%{opacity: var(--opacity-medium);}
        60%{transform: translateY(1800%) translateX(-200%); opacity: 0;}
        61%{transform: translateY(-1800%); opacity: 0;}
        70%{opacity: var(--opacity-medium);}
        80%{transform: translateY(1800%) translateX(300%); opacity: 0;}
        81%{transform: translateY(-1800%); opacity: 0;}
        90%{opacity: var(--opacity-medium); transform: translateX(-400%);}
        99%{transform: translateY(1800%); opacity: 0;}
        100%{transform: translateY(-1800%) translateX(-250%); opacity: 0; transform: rotate(400deg);}
                }

@keyframes xanimate3{
        0%{top: 40%; opacity: 0;}
        10%{opacity: var(--opacity-medium);}
        15%{transform: translateY(1200%); opacity: 0;}
        16%{transform: translateY(-1800%); opacity: 0;}
        26%{opacity: var(--opacity-medium); transform: rotate(50deg);}
        36%{transform: translateY(1800%); opacity: 0;}
        37%{transform: translateY(-1800%); opacity: 0;}
        47%{opacity: var(--opacity-medium);}
        57%{transform: translateY(1800%); opacity: 0;}
        58%{transform: translateY(-1800%); opacity: 0;}
        68%{opacity: var(--opacity-medium);}
        78%{transform: translateY(1800%); opacity: 0;}
        79%{transform: translateY(-1800%); opacity: 0;}
        90%{opacity: var(--opacity-medium);}
        99%{transform: translateY(1800%); opacity: 0;}
        100%{transform: translateY(-1800%); opacity: 0; transform: rotate(-360deg); transform: translateX(-400%);}
                }


@keyframes xanimate4{
0% {top: 60%; opacity: 0;}
4%{opacity: var(--opacity-medium);}
9% {transform: translateY(800%); opacity:0;}
10%{transform: translateY(-1800%); opacity: 0;}
20%{transform: rotate(120deg); opacity: var(--opacity-medium);}
30%{transform: translateY(1800%); opacity: 0;}
31%{transform: translateY(-1800%); opacity: 0;}
40%{transform: rotate(200deg); opacity: var(--opacity-medium);}
50%{transform: translateY(1800%); opacity: 0;}
51%{transform: translateY(-1800%); opacity: 0;}
60%{transform: rotate(270deg); opacity: var(--opacity-medium);}
70%{transform: translateY(1800%); opacity: 0;}
71%{transform: translateY(-1800%); opacity: 0;}
85%{transform: rotate(360deg); opacity: var(--opacity-medium);}
100%{transform: translateY(1800%); opacity: 0; transform: translateX(-400%);}
}


@keyframes xanimate5{
0%{top: 80%; opacity: 0;}
5%{transform: translateY(600%); opacity: 0;}
6%{transform: translateY(-1800%); opacity: 0;}
16%{opacity: var(--opacity-medium);}
26%{transform: translateY(1800%); opacity: 0;}
27%{transform: translateY(-1800%); opacity: 0;}
37%{opacity: var(--opacity-medium); transform: translateX(300%);}
47%{transform: translateY(1800%); opacity: 0;}
48%{transform: translateY(-1800%); opacity: 0;}
58%{opacity: var(--opacity-medium);}
68%{transform: translateY(1800%) translateX(-400%); opacity: 0;}
69%{transform: translateY(-1800%); opacity: 0;}
79%{opacity: var(--opacity-medium);}
89%{transform: translateY(1800%); opacity: 0;}
90%{transform: translateY(-1800%); opacity: 0;}
95%{opacity: var(--opacity-medium);}
100%{transform: translateY(800%) translateX(250%); transform: rotate(450deg); left: 20%;}
}